<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        react表单：
        1. 受控组件： 收到状态数据的控制。自定义onChange函数，改变状态数据
        2. 非受控[单向数据绑定]：   不受到状态数据的控制 
        Vue 表单：
        1. 单向数据绑定：从Model->View            v-bind:value=""  绑定值
        2. 双向数据绑定：从Mdodel->View  还可以从 View -> Model
    -->
    <div id="demo">
        <h3>单向数据绑定: v-bind:value</h3>
        <input type="text" name="" v-bind:value="username">
        <input type="text" name="" :value="username">
        <h3>双向数据绑定: v-model="数据"</h3>
        <input type="text" name="" v-model:value="username">
        <h4>简写：</h4>
        <input type="text" name="" v-model="username">
    </div>
    <script>
        /**
         *  数据绑定[表单数据绑定]分两种：
         *  1. 单向数据绑定：v-bind:value="值"  简写 :value="值"    非受控组件
         *  2. 双向数据绑定：v-model:value="值"                     受控组件
         * 
         *  简写形式： 
         *  1. 单向： :value="值"
         *  2. 双向： v-model="值"
         * 
         */
        new Vue({
            el:'#demo',
            data:{
                username:'atguigu'
            }
        })

    </script>
</body>

</html>